<script setup lang="ts">
import { ref,defineOptions } from 'vue'
defineProps(['title'])

</script>
<template>
    <li id="topicBox">
        <div class="left"></div>
        <div class="center">
            {{ title }}
        </div>
        <div class="right"></div>
    </li>
</template>

<style scoped lang='less'>
#topicBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20vw;
    .center{
        width: 30%;
        margin: 0 10%;
        box-sizing: border-box;
        color: #dd7781;
        border: 1px solid #e9a4aa;
        text-align: center;
        padding: 10px 10px;
        position: relative;
        font-weight: 500;
        &::before{
            content: "";
            position: absolute;
            width: 95%;
            height: 87%;
            border: 1px solid #e9a4aa;
            // transform: translate(1.4);
            top: 1px;
            left: 2px;
        }
    }
    .left,.right{
        width: 30%;
        background-color: #e9a4aa;
        height: 1px;
    }
}
</style>